import React from 'react';
import ReactDOM from 'react-dom';
import '../../static/tero/nav.less';
import $ from 'jquery';
import Pop from './popup.jsx';
import u from '../../common.js'

class Otheraddfour extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            names: [],
            index: 0,
            flag: false,
            base: [],
            display: 'none',
            inde: 10,
            indexNav: 0
        }
    }
    addEventListener() {

        this.setState((prevState, props) => ({
            names: this.props.names,
            base: this.props.names,
            myname: this.props.myname,
            mynumber: this.props.mynumber,
            top: this.props.top
        }))
    }
    componentWillMount() {
        this.addEventListener()
    }
    adminPop() {
        let flag = true;
        if ($('#admin')) {
            $('#admin').click(function () {
                let scale = 0;
                let periphery = 0;
                scale = flag ? 0 : 260;
                periphery = flag ? -260 : 0;
                $('.nav_b_right').css('transform', 'translateX(' + scale + 'px)');
                $('.nav_b_left_son_periphery').css('transform', 'translateX(' + periphery + 'px)');
                flag = !flag;
            })
        }
    }
    componentDidMount() {
        this.adminPop()

    }
    componentDidUpdate() {
        this.adminPop()
    }
    toggle(index, flag) {
        flag ? this.setState((prevState, props) => ({
            index: index,
            indexNav: index,
        })) : this.setState((prevState, props) => ({
            indexNav: index,
        }))

        this.props.blockContent(index)
        u.setStore('gzName', this.props.names[index])
    }
    search(e) {
        this.props.blockContent('', e.target.value)
    }
    pop(index) { //打开pop遮罩弹框
        // alert(index)
        this.setState((prevState, props) => ({
            inde: index,
            display: 'block',

        }))

    }
    popProp(val, index) { // 用来关闭遮罩弹框
        this.setState(prevState => ({
            display: val
        }))

    }
    render() {
        return (
            <div className='tero_nav'>
                <Pop index={this.state.inde} display={this.state.display} colse={this.popProp.bind(this)} />
                <div className='left'><img src={require('../../static/image/left_icon.png')} alt="" /></div>
                <div className='right'><img src={require('../../static/image/right_icon.png')} alt="" onClick={() => {
                    if (this.props.downLoad) { return }
                    this.setState({
                        flag: !this.state.flag
                    })
                }} />
                    <div className={this.state.flag ? 'right_son active' : 'right_son'}>
                        <input type="text" placeholder='请输入内容' onChange={(e) => { this.search(e) }} />
                        {/* 添加微信号以及微信群 */}
                        {this.state.myname && <span className='addWeixin' onClick={() => {
                            this.pop(this.props.mynumber)
                        }}>
                            {this.state.myname}
                        </span>}
                        <div className='right_son_bottom' style={{ top: this.state.top }}>
                            <ul>
                                {this.props.filter.length > 0 && this.props.filter.map((item, index) => {
                                    return (<li onClick={() => { this.toggle(index, true) }} key={index} className={this.state.indexNav == index ? 'active_li' : ''}>{item}</li>)
                                })}
                            </ul>
                        </div>
                    </div>
                </div>
                <div className='nav_father'>
                    <ul className='nav'>
                        {this.props.filter.length > 0 && this.props.filter.map((item, index) => {
                            if (this.state.index + 10 >= this.props.filter.length) {
                                if (index >= this.state.index) {
                                    return (<li key={index} onClick={() => { this.toggle(index, false) }} className={this.state.indexNav == index ? 'active_li' : ''} dangerouslySetInnerHTML={{ __html: item }}></li>)
                                }
                            } else {
                                if (index >= this.state.index && index < this.state.index + 10) {
                                    return (<li key={index} onClick={() => { this.toggle(index, false) }} className={this.state.indexNav == index ? 'active_li' : ''} dangerouslySetInnerHTML={{ __html: item }}></li>)
                                }
                            }


                        })}

                    </ul>
                </div>
            </div>
        )
    }
}
export default Otheraddfour